<template>
	<div class="content">
		<div class="landing-head-top">
			<img src="../assets/img/logos.png" alt="" />
		</div>
		<div class="landing-banner">
			<img src="../assets/img/99.png" alt="">
		</div>
		<div class="landing-banner1">
			<img src="../assets/img/98.png" alt="">
		</div>
		<div class="landing-service">
			<div class="p7">特色服务</div>
			<div class="p2">CHARACTERISTIC SERVICE</div>
			<div class="flex">
				<div class="flexitem" @click="gologin()">
					<img src="../assets/img/wangshangkaihu.png" alt="" />
					<div>网上开户</div>
					<div>Open an account online</div>
				</div>
				<div class="flexitem" @click="gologin()">
					<img src="../assets/img/xianhuoshangpin.png" alt="" />
					<div>现货商品</div>
					<div>Spot financing</div>
				</div>
				<div class="flexitem" @click="gologin()">
					<img src="../assets/img/lianxikefu.png" alt="" />
					<div>联系客服</div>
					<div>Billing guide</div>
				</div>
				<div class="flexitem" @click="gologin()">
					<img src="../assets/img/gerenzhongxin.png" alt="" />
					<div>个人中心</div>
					<div>Warehousing logistics</div>
				</div>
			</div>
		</div>
		<div class="landing-introduce">
			<img src="../assets/img/97.png" alt="" />
		</div>
		<div class="landing-footer">
			<img src="../assets/img/96.png" alt="" />
		</div>
		
		<!-- <tabBar :active="0"></tabBar> -->
	</div>
</template>

<script>
	import tabBar from '@/components/tabBar.vue';
	export default{
		name: 'Index',
		components: {
			tabBar
		},
		methods: {
			gologin(){
				this.$router.push('/login');
			}
		}
	}
</script>

<style scoped>
img{
	margin: 0;
	padding: 0;
}
.content{
	background-color: #21212b;
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
	color: #fff;
	font-size: 14px;
	/* padding-bottom: 53px; */
	box-sizing: border-box;
}
.landing-head-top{
	padding: 15px 0;
}
.landing-head-top img{
	width: 104px;
	height: 22px;
}
.landing-banner{
	overflow: hidden;
	width: 100%;
	height: 184px;
}
.landing-banner img{
	width: 100%;
	height: 184px;
}
.landing-banner1{
	overflow: hidden;
	width: 100%;
	height: 342px;
}
.landing-banner1 img{
	width: 100%;
	height: 342px;
}
.landing-service{
	padding: 15px 0;
	line-height: 1.5;
}
.p7{
	font-size: 22px;
	text-align: center;
}
.p2{
	font-size: 12px;
	text-align: center;
}
.flex{
	margin: 15px 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.flexitem{
	width: 22%;
	line-height: 1.5;
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
}
.flexitem img{
	width: 100%;
	height: 86px;
}
.landing-introduce{
	overflow: hidden;
	width: 100%;
	height: 530px;
}
.landing-introduce img{
	width: 100%;
	height: 530px;
}
.landing-footer{
	overflow: hidden;
	width: 100%;
	height: 54px;
}
.landing-footer img{
	width: 100%;
	height: 54px;
}
</style>